import { View, Text, Icon, ScrollView, } from '@tarojs/components';
import Taro, { useDidShow, useLoad } from '@tarojs/taro';
import { useDispatch, useSelector } from 'react-redux';
import { decrement, increment } from '@/store/countSlice';
import IndexFooterBar from '@/components/IndexFooterBar';
import { Divider, Button, Cell, } from '@nutui/nutui-react-taro';
import { useEffect, useState } from 'react';
import MovieCard from '@/components/MovieCard';
import { setActivePage } from '@/store/userDataSlice';
import Skeleton from 'react-loading-skeleton';

import './index.scss';
import LittleMovieCard from './components/LittleMovieCard';





export type hotMovieProps = {
  id: number,
  nm: string,
  sc: string,
  img: string,
  rt: string,
  star: string,
  showInfo: string,
};


export type mostExpectedMovieProps = {
  id: number,
  wish: number,
  img: string,
  nm: string,
  comingTitle: string,
  sc: number;
};

export type comingMovieProps = {
  id: number,
  wish: number,
  img: string,
  nm: string,
  star: string,
  rt: string,
  showInfo: string,
  comingTitle: string,
  sc: number;
};


export default function Index() {
  //状态函数
  const [hotMovieList, setHotMovieList] = useState<hotMovieProps[]>([]);
  const [comeSoonMovieList, setComeSoonMovieList] = useState<comingMovieProps[]>([]);
  const [mostExpectedMovieList, setMostExpectedMovieList] = useState<mostExpectedMovieProps[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);

  //Redux配置
  const dispatch = useDispatch();
  const useData = useSelector((state: any) => state.userData);

  useLoad(() => {
    console.log('Page loaded.');
  });

  useDidShow(() => {
    dispatch(setActivePage("主页"));
    console.log(useData);
  });


  useEffect(() => {

    Taro.request({
      url: 'https://apis.netstart.cn/maoyan/index/movieOnInfoList',
      success: function (res) {
        setHotMovieList(res.data.movieList);
      }
    });

    Taro.request({
      url: 'https://apis.netstart.cn/maoyan/index/comingList?ci=1&limit=20',
      success: function (res) {
        setComeSoonMovieList(res.data.coming);
      }
    });

    Taro.request({
      url: 'https://apis.netstart.cn/maoyan/index/mostExpected?limit=10&offset=0',
      success: function (res) {
        setMostExpectedMovieList(res.data.coming);
      }
    });
  }, []);


  setTimeout(() => {
    setIsLoading(false);
  }, 2000);
  return (
    <View className='index'>

      {/* <View className='text' ></View>
      <Text className='test2'>一二三123abc水饺皇后</Text> */}
      <Cell className='HotMovieContainer'>
        <View className='HotMovieContainer-title'>
          <Text style={{ color: "#dd5500" }}>热门电影</Text>
          <Text style={{ color: "skyblue" }}>更多详细</Text>
        </View>

        <View className='HotMovieContainer-scroll'>
          {hotMovieList.length !== 0 ? hotMovieList.map((item, index) => {
            return (
              <LittleMovieCard key={hotMovieList[index].id} props={item} />
            );
          }) : Array(3).fill(null).map((_, index) => <LittleMovieCard props={{}} key={index} bone />)}
        </View>
      </Cell>

      <Cell className='ComeSoonMovieContainer'>
        <View className='ComeSoonMovieContainer-title'>
          <Text style={{ color: "#dd5500" }}>即将上映</Text>
          <Text style={{ color: "skyblue" }}>更多详细</Text>
        </View>

        <View className='ComeSoonMovieContainer-scroll'>
          {comeSoonMovieList.length !== 0 ? comeSoonMovieList.map((item, index) => {
            return (
              <LittleMovieCard comingSoon key={comeSoonMovieList[index].id} props={item} />
            );
          }) : Array(3).fill(null).map((_, index) => <LittleMovieCard props={{}} key={index} bone />)}
        </View>
      </Cell>

      <Cell className='ComeSoonMovieContainer'>
        <View className='ComeSoonMovieContainer-title'>
          <Text style={{ color: "#dd5500" }}>最受期待</Text>
          <Text style={{ color: "skyblue" }}>更多详细</Text>
        </View>

        <View className='ComeSoonMovieContainer-scroll'>
          {mostExpectedMovieList.length !== 0 ? mostExpectedMovieList.map((item, index) => {
            return (
              <LittleMovieCard comingSoon key={mostExpectedMovieList[index].id} props={item} />
            );
          }) : Array(3).fill(null).map((_, index) => <LittleMovieCard props={{}} key={index} bone />)}
        </View>
      </Cell>


      <IndexFooterBar />
    </View>
  );
}
